<template>
  <div>
    <link
      rel="stylesheet"
      href="https://g.alicdn.com/de/prismplayer/2.9.17/skins/default/aliplayer-min.css"
    />
    <script
      type="text/javascript"
      charset="utf-8"
      src="https://g.alicdn.com/de/prismplayer/2.9.17/aliplayer-min.js"
    ></script>

    <!-- 定义播放器dom -->
    <div id="J_prismPlayer" class="prism-player" />
  </div>
</template>
<script>
import vod from "@/api/vod";

export default {
  layout: "video", //应用video布局
  data() {
    return {
      playAuth: "",
      vid: "",
      cover: "",
    };
  },
  created() {},
  methods: {
    //获取播放凭证
    getPlayAuth() {
      this.vid = this.$route.params.vid;
      vod.getPlayAuth(this.vid).then((response) => {
        this.playAuth = response.data;
        this.initPlayer();
      });
    },
    //获取封面
    getCover() {
      vod.getCover(this.vid).then((response) => {
        this.cover = response.data;
      });
    },

    initPlayer() {
      new Aliplayer(
        {
          id: "J_prismPlayer",
          vid: this.vid, // 视频id
          playauth: this.playAuth, // 播放凭证
          encryptType: "1", // 如果播放加密视频，则需设置encryptType=1，非加密视频无需设置此项
          width: "100%",
          height: "500px",
          // 以下可选设置
          cover: this.cover, // 封面
          qualitySort: "asc", // 清晰度排序

          mediaType: "video", // 返回音频还是视频
          autoplay: false, // 自动播放
          isLive: false, // 直播
          rePlay: false, // 循环播放
          preload: true,
          controlBarVisibility: "hover", // 控制条的显示方式：鼠标悬停
          useH5Prism: true, // 播放器类型：html5
        },
        function (player) {
          console.log("播放器创建成功");
        }
      );
    },
  },
  mounted() {
    //页面渲染之后
    this.getPlayAuth();
    this.getCover();
  },
};
</script>
